FormFileUpload: Add Storybook stories #38734

mirka · 2022-02-11T09:30:15Z

Part of #36128
In preparation for #37555

Description

Adds missing stories for the FormFileUpload component.

Also tweaks the readme example a bit to clarify how to get the selected files.

Testing Instructions

npm run storybook:dev
See the stories for FormFileUpload

Types of changes

Storybook/docs only.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
I've updated related schemas if appropriate.

github-actions · 2022-02-11T09:38:08Z

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	993 B
`build/admin-manifest/index.min.js`	1.13 kB
`build/annotations/index.min.js`	2.77 kB
`build/api-fetch/index.min.js`	2.25 kB
`build/autop/index.min.js`	2.15 kB
`build/blob/index.min.js`	487 B
`build/block-directory/index.min.js`	6.31 kB
`build/block-directory/style-rtl.css`	1.01 kB
`build/block-directory/style.css`	1.01 kB
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/index.min.js`	142 kB
`build/block-editor/style-rtl.css`	14.8 kB
`build/block-editor/style.css`	14.8 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	111 B
`build/block-library/blocks/audio/style.css`	111 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	470 B
`build/block-library/blocks/button/editor.css`	470 B
`build/block-library/blocks/button/style-rtl.css`	560 B
`build/block-library/blocks/button/style.css`	560 B
`build/block-library/blocks/buttons/editor-rtl.css`	292 B
`build/block-library/blocks/buttons/editor.css`	292 B
`build/block-library/blocks/buttons/style-rtl.css`	275 B
`build/block-library/blocks/buttons/style.css`	275 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	406 B
`build/block-library/blocks/columns/style.css`	406 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-template/style-rtl.css`	127 B
`build/block-library/blocks/comment-template/style.css`	127 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-query-loop/editor-rtl.css`	95 B
`build/block-library/blocks/comments-query-loop/editor.css`	95 B
`build/block-library/blocks/cover/editor-rtl.css`	546 B
`build/block-library/blocks/cover/editor.css`	547 B
`build/block-library/blocks/cover/style-rtl.css`	1.55 kB
`build/block-library/blocks/cover/style.css`	1.55 kB
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	417 B
`build/block-library/blocks/embed/style.css`	417 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	353 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	965 B
`build/block-library/blocks/gallery/editor.css`	967 B
`build/block-library/blocks/gallery/style-rtl.css`	1.61 kB
`build/block-library/blocks/gallery/style.css`	1.61 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	159 B
`build/block-library/blocks/group/editor.css`	159 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	114 B
`build/block-library/blocks/heading/style.css`	114 B
`build/block-library/blocks/html/editor-rtl.css`	332 B
`build/block-library/blocks/html/editor.css`	333 B
`build/block-library/blocks/image/editor-rtl.css`	810 B
`build/block-library/blocks/image/editor.css`	809 B
`build/block-library/blocks/image/style-rtl.css`	500 B
`build/block-library/blocks/image/style.css`	503 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	199 B
`build/block-library/blocks/latest-posts/editor.css`	198 B
`build/block-library/blocks/latest-posts/style-rtl.css`	447 B
`build/block-library/blocks/latest-posts/style.css`	446 B
`build/block-library/blocks/list/style-rtl.css`	94 B
`build/block-library/blocks/list/style.css`	94 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	493 B
`build/block-library/blocks/media-text/style.css`	490 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	649 B
`build/block-library/blocks/navigation-link/editor.css`	650 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	299 B
`build/block-library/blocks/navigation-submenu/editor.css`	299 B
`build/block-library/blocks/navigation-submenu/view.min.js`	375 B
`build/block-library/blocks/navigation/editor-rtl.css`	1.98 kB
`build/block-library/blocks/navigation/editor.css`	1.99 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.89 kB
`build/block-library/blocks/navigation/style.css`	1.88 kB
`build/block-library/blocks/navigation/view.min.js`	2.85 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	401 B
`build/block-library/blocks/page-list/editor.css`	402 B
`build/block-library/blocks/page-list/style-rtl.css`	175 B
`build/block-library/blocks/page-list/style.css`	175 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	273 B
`build/block-library/blocks/paragraph/style.css`	273 B
`build/block-library/blocks/post-author/style-rtl.css`	175 B
`build/block-library/blocks/post-author/style.css`	176 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	446 B
`build/block-library/blocks/post-comments-form/style.css`	446 B
`build/block-library/blocks/post-comments/style-rtl.css`	521 B
`build/block-library/blocks/post-comments/style.css`	521 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	721 B
`build/block-library/blocks/post-featured-image/editor.css`	721 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	153 B
`build/block-library/blocks/post-featured-image/style.css`	153 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	323 B
`build/block-library/blocks/post-template/style.css`	323 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	80 B
`build/block-library/blocks/post-title/style.css`	80 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/pullquote/style-rtl.css`	389 B
`build/block-library/blocks/pullquote/style.css`	388 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	234 B
`build/block-library/blocks/query-pagination/style.css`	231 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	201 B
`build/block-library/blocks/quote/style.css`	201 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	397 B
`build/block-library/blocks/search/style.css`	398 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	233 B
`build/block-library/blocks/separator/style.css`	233 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B
`build/block-library/blocks/shortcode/editor.css`	474 B
`build/block-library/blocks/site-logo/editor-rtl.css`	744 B
`build/block-library/blocks/site-logo/editor.css`	744 B
`build/block-library/blocks/site-logo/style-rtl.css`	181 B
`build/block-library/blocks/site-logo/style.css`	181 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	177 B
`build/block-library/blocks/social-link/editor.css`	177 B
`build/block-library/blocks/social-links/editor-rtl.css`	674 B
`build/block-library/blocks/social-links/editor.css`	673 B
`build/block-library/blocks/social-links/style-rtl.css`	1.37 kB
`build/block-library/blocks/social-links/style.css`	1.36 kB
`build/block-library/blocks/spacer/editor-rtl.css`	332 B
`build/block-library/blocks/spacer/editor.css`	332 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	471 B
`build/block-library/blocks/table/editor.css`	472 B
`build/block-library/blocks/table/style-rtl.css`	481 B
`build/block-library/blocks/table/style.css`	481 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	214 B
`build/block-library/blocks/tag-cloud/style.css`	215 B
`build/block-library/blocks/template-part/editor-rtl.css`	560 B
`build/block-library/blocks/template-part/editor.css`	559 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	571 B
`build/block-library/blocks/video/editor.css`	572 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	921 B
`build/block-library/common.css`	919 B
`build/block-library/editor-rtl.css`	10.1 kB
`build/block-library/editor.css`	10.1 kB
`build/block-library/index.min.js`	168 kB
`build/block-library/reset-rtl.css`	474 B
`build/block-library/reset.css`	474 B
`build/block-library/style-rtl.css`	11.3 kB
`build/block-library/style.css`	11.3 kB
`build/block-library/theme-rtl.css`	672 B
`build/block-library/theme.css`	676 B
`build/block-serialization-default-parser/index.min.js`	1.12 kB
`build/block-serialization-spec-parser/index.min.js`	2.83 kB
`build/blocks/index.min.js`	46.4 kB
`build/components/index.min.js`	215 kB
`build/components/style-rtl.css`	15.5 kB
`build/components/style.css`	15.5 kB
`build/compose/index.min.js`	11.2 kB
`build/core-data/index.min.js`	13.4 kB
`build/customize-widgets/index.min.js`	11.4 kB
`build/customize-widgets/style-rtl.css`	1.5 kB
`build/customize-widgets/style.css`	1.49 kB
`build/data-controls/index.min.js`	663 B
`build/data/index.min.js`	7.47 kB
`build/date/index.min.js`	31.9 kB
`build/deprecated/index.min.js`	518 B
`build/dom-ready/index.min.js`	336 B
`build/dom/index.min.js`	4.53 kB
`build/edit-navigation/index.min.js`	16.2 kB
`build/edit-navigation/style-rtl.css`	3.76 kB
`build/edit-navigation/style.css`	3.76 kB
`build/edit-post/classic-rtl.css`	546 B
`build/edit-post/classic.css`	547 B
`build/edit-post/index.min.js`	30 kB
`build/edit-post/style-rtl.css`	7.17 kB
`build/edit-post/style.css`	7.16 kB
`build/edit-site/index.min.js`	41.9 kB
`build/edit-site/style-rtl.css`	7.22 kB
`build/edit-site/style.css`	7.21 kB
`build/edit-widgets/index.min.js`	16.7 kB
`build/edit-widgets/style-rtl.css`	4.17 kB
`build/edit-widgets/style.css`	4.17 kB
`build/editor/index.min.js`	38.5 kB
`build/editor/style-rtl.css`	3.71 kB
`build/editor/style.css`	3.71 kB
`build/element/index.min.js`	3.32 kB
`build/escape-html/index.min.js`	548 B
`build/format-library/index.min.js`	6.62 kB
`build/format-library/style-rtl.css`	571 B
`build/format-library/style.css`	571 B
`build/hooks/index.min.js`	1.66 kB
`build/html-entities/index.min.js`	454 B
`build/i18n/index.min.js`	3.79 kB
`build/is-shallow-equal/index.min.js`	535 B
`build/keyboard-shortcuts/index.min.js`	1.83 kB
`build/keycodes/index.min.js`	1.41 kB
`build/list-reusable-blocks/index.min.js`	1.75 kB
`build/list-reusable-blocks/style-rtl.css`	838 B
`build/list-reusable-blocks/style.css`	838 B
`build/media-utils/index.min.js`	2.94 kB
`build/notices/index.min.js`	957 B
`build/nux/index.min.js`	2.12 kB
`build/nux/style-rtl.css`	747 B
`build/nux/style.css`	743 B
`build/plugins/index.min.js`	1.98 kB
`build/primitives/index.min.js`	949 B
`build/priority-queue/index.min.js`	611 B
`build/react-i18n/index.min.js`	704 B
`build/react-refresh-entry/index.min.js`	8.44 kB
`build/react-refresh-runtime/index.min.js`	7.31 kB
`build/redux-routine/index.min.js`	2.69 kB
`build/reusable-blocks/index.min.js`	2.25 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	11.1 kB
`build/server-side-render/index.min.js`	1.61 kB
`build/shortcode/index.min.js`	1.52 kB
`build/token-list/index.min.js`	668 B
`build/url/index.min.js`	1.92 kB
`build/viewport/index.min.js`	1.08 kB
`build/warning/index.min.js`	280 B
`build/widgets/index.min.js`	7.18 kB
`build/widgets/style-rtl.css`	1.16 kB
`build/widgets/style.css`	1.16 kB
`build/wordcount/index.min.js`	1.07 kB

_{compressed-size-action}

ciampo

LGTM 🚀

I also noticed that the system dialog takes a very long time to show after clicking the button, is that something that you can reproduce too?

file-upload-slow.mp4

mirka · 2022-02-14T17:14:01Z

I also noticed that the system dialog takes a very long time to show after clicking the button, is that something that you can reproduce too?

Yeah same, except I find it to be really inconsistent. Most of the time, the first click on the button is super slow but the subsequent clicks are fast. The same thing happens with the examples on MDN. There seems to have been a regression in the past, so likely a browser issue again?

mirka added 2 commits February 11, 2022 18:28

FormFileUpload: Add Storybook stories

82a19cc

Improve example in readme

0fc40f9

mirka added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Feb 11, 2022

mirka requested a review from ciampo February 11, 2022 09:30

mirka self-assigned this Feb 11, 2022

mirka requested a review from ajitbohra as a code owner February 11, 2022 09:30

ciampo approved these changes Feb 11, 2022

View reviewed changes

mirka merged commit 42c9108 into trunk Feb 14, 2022

mirka deleted the storybook/form-file-upload branch February 14, 2022 17:14

github-actions bot added this to the Gutenberg 12.7 milestone Feb 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormFileUpload: Add Storybook stories #38734

FormFileUpload: Add Storybook stories #38734

mirka commented Feb 11, 2022

github-actions bot commented Feb 11, 2022

ciampo left a comment

mirka commented Feb 14, 2022

FormFileUpload: Add Storybook stories #38734

FormFileUpload: Add Storybook stories #38734

Conversation

mirka commented Feb 11, 2022

Description

Testing Instructions

Types of changes

Checklist:

github-actions bot commented Feb 11, 2022

ciampo left a comment

Choose a reason for hiding this comment

mirka commented Feb 14, 2022